<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>黑马面面</title>
		<link rel="stylesheet" type="text/css" href="./css/normalize.css"/>
    <link rel="stylesheet" type="text/css"  href="./css/swiper.min.css">
    <link rel="stylesheet"  type="text/css"  href="./css/iconfont.css">
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
	</head>
	<body>

    <!-- 1. 导航 & banner 模块 -->
    <section class="wrapper">
      <!-- 头部 -->
      <header class="title">黑马面面</header>
      
      <!-- 导航 -->
      <nav class="nav">
        <a href="#" class="item">
          <img src="./icons/nav1@2x.png" alt="">
          <span>HR面试</span>
        </a>
        <a href="#" class="item">
          <img src="./icons/nav2@2x.png" alt="">
          <span>笔试</span>
        </a>
        <a href="#" class="item">
          <img src="./icons/nav3@2x.png" alt="">
          <span>技术面试</span>
        </a>
        <a href="#" class="item">
          <img src="./icons/nav4@2x.png" alt="">
          <span>模拟面试</span>
        </a>
        <a href="#" class="item">
          <img src="./icons/nav5@2x.png" alt="">
          <span>面试技巧</span>
        </a>
        <a href="#" class="item">
          <img src="./icons/nav6@2x.png" alt="">
          <span>薪资查询</span>
        </a>
      </nav>

      <!-- banner -->
      <div class="banner">
        <img src="./images/banner@2x.png" alt="">
      </div>
    </section>
		
    <!-- 2. 就业指导 模块 -->
    <section class="guide wrapper">
      <!-- 标题 -->
      <div class="guide-title">
        <h4>就业指导</h4>
        <a href="#" class="more">更多>></a>
      </div>
      <!-- 轮播图 -->
      <div class="guide-carousel">
        <!-- Swiper -->
        <div class="swiper-container job_guide_wrapper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="#">
                <img src="./images/guide_pic1@2x.png" alt="">
              </a>
              <p>老师教你应对面试技巧1</p>
            </div>
            <div class="swiper-slide">
              <a href="#">
                <img src="./images/guide_pic1@2x.png" alt="">
              </a>
              <p>老师教你应对面试技巧2</p>
            </div>
            <div class="swiper-slide">
              <a href="#">
                <img src="./images/guide_pic1@2x.png" alt="">
              </a>
              <p>老师教你应对面试技巧3</p>
            </div> 
          </div>
          
        </div>
        <!-- 根据需求，将箭头放在swiper-container外边 -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </section>

    <!-- 3. 充电学习 模块 -->
    <section class="learn wrapper">
      <!-- 标题 -->
      <div class="learn-title">
        <h4>充电学习</h4>
        <a href="#" class="more">更多>></a>
      </div>
      <!-- 轮播图 -->
      <!-- Swiper -->
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./images/pic1.png" alt="">
            <h5>说地道英语，告别中式英语</h5>
            <p><span>156</span>人学习</p>
          </div>
          <div class="swiper-slide">
            <img src="./images/pic2.png" alt="">
            <h5>思维攻略金字塔思维提升写作能力</h5>
            <p><span>125</span>人学习</p>
          </div>
          <div class="swiper-slide">
            <img src="./images/pic1.png" alt="">
            <h5>说地道英语，告别中式英语</h5>
            <p><span>156</span>人学习</p>
          </div>
          <div class="swiper-slide">
            <img src="./images/pic2.png" alt="">
            <h5>思维攻略金字塔思维提升写作能力2</h5>
            <p><span>125</span>人学习</p>
          </div>
          <div class="swiper-slide">
            <img src="./images/pic1.png" alt="">
            <h5>说地道英语，告别中式英语2</h5>
            <p><span>156</span>人学习</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 4. 底部tabbar 模块 -->
    <footer class="tabbar">
      <a href="#" class="item active">
        <i class="iconfont icon-shouye"></i>
        <span>首页</span>
      </a>
      <a href="#" class="item">
        <i class="iconfont icon-ziliao"></i>
        <span>技术面试</span>
      </a>
      <a href="#" class="item">
        <i class="iconfont icon-edit-1"></i>
        <span>模拟面试</span>
      </a>
      <a href="#" class="item">
        <i class="iconfont icon-wode"></i>
        <span>我的主页</span>
      </a>
    </footer>

		<script src="./js/flexible.js" type="text/javascript" charset="utf-8"></script>  
    <script src="./js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    
    <!-- Initialize Swiper -->
    <script>
      //就业指导 轮播图
      //Initialize Swiper 
      ;(function(){
        var swiper = new Swiper('.swiper-container', {
          slidesPerView: 2,
          spaceBetween: 30,
          centeredSlides: true,
          loop: true,
          //左右切换箭头 
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
      })()

      //充电学习 轮播图
      //Initialize Swiper 
      ;(function(){
        var swiper = new Swiper(".mySwiper", {
          slidesPerView: 2.3,
          spaceBetween: 20,
        });
      })()
    </script>
	</body>
</html>
